@use '../../styles/variables';

.footer {
    display:   block;
    box-sizing: border-box;
    padding:    10px;
    position:  fixed;
    bottom:    15px;
    left:      50%;
    font-size: 15px;
    text-align: center;
    color:     white;

    a {
        color:  white;
        cursor: pointer;
        &:hover,
        &:active {
            color:           white;
            text-decoration: underline;
        }
    }
}

@media (max-width: #{variables.$screen-xs-max}) {
    .footer {
        width:      100%;
        transform: translateX(-50%);
    }
}
@media (min-width: #{variables.$screen-sm-min}) {
    .footer {
        width:      calc(100% - #{variables.$sidebar-width});
        // workaround for IE 9, 10, 11, Edge
        // equals to `transform: translateX(calc(-50% + $sidebar-width / 2));`
        transform: translateX(-50%) translateX(calc(#{variables.$sidebar-width} / 2));
    }
}
